import {Utils} from '../common.js'
import TextWidget from './text-widget.js'
import * as Highlighter from '../highlighter.js'
import {WIDGET_TYPE} from './widget-const.js';

const _template = Object.freeze({
    content: "std::cout<<\"Hello World\";",
    language: "cpp",
});

export default class CodeWidget extends TextWidget {
    constructor(sectionData, dispatcher) {
        super(sectionData, dispatcher);
        this._languageElem = undefined;
        this._menuElem = undefined;
        try {
            this._data = sectionData.content ?? JSON.parse(JSON.stringify(_template));
        } catch(e) {
            this._data = JSON.parse(JSON.stringify(_template));
            console.log(e.message);
            console.log(e.stack);
        }
    }
    //get language() {return "javascript";} //
    get language() {return this._data.language;}
    get textareaText() {return this._data.content ?? _template.content;}
    set textareaText(value) {this._data.content = value;}
    get sectionData() {
        this._sectionData.type = WIDGET_TYPE.CODE;
        this._sectionData.content = this._data;
        return this._sectionData;
    }
    Init() {
        super.Init();

        const _uuid=Utils.GUID();
        this._languageElem = Utils.CreateHTMLElement(`
    <div class='px-3'>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="${_uuid}" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="width:fit-content">
            ${this.language}
          </a>
          <ul class="dropdown-menu" aria-labelledby="${_uuid}">
            <li><a class="dropdown-item" data-slog-link="cpp">Cpp</a></li>
            <li><a class="dropdown-item" data-slog-link="javascript">JavaScript</a></li>
            <li><a class="dropdown-item" data-slog-link="go">Golang</a></li>
          </ul>
        </li>
      </ul>
    </div>
`);
        this._menuElem = this._languageElem.querySelector(`#${_uuid}`);
        this._editContainerElem.prepend(this._languageElem);
        this._editContainerElem.setAttribute('data-language', 'code');
        this.backgroundColor = "#eeeeee";
        this._languageElem.addEventListener('click', (e) => {this._MenuClicked(e);});
        return this;
    }

    _MenuClicked(e) {
        const _target = e.target;
        if (_target.hasAttribute('data-slog-link')) {
            const _lang = _target.dataset['slogLink'];
            this._data.language = _lang;
            this._menuElem.innerText = _lang;
            this._dirty = true;
            this.SetLanguage(_lang);
        }
    }

    _UpdateView() {
        try {
            this._viewContainerElem.innerHTML = `<pre class="hljs language-${this.language} scroll scroll-horizontal"></pre>`;
            const _elem = this._viewContainerElem.querySelector('pre');
            Highlighter.LoadLanguage(this.language).then(() => {
                _elem.innerHTML = Highlighter.Highlight(this.textareaText, this.language);
            }, () => {
                _elem.innerText = this.textareaText;
            });
        } catch(e) {
            this._viewContainerElem.innerText = e.message;
            console.log(e.stack);
        }
    }
    _UpdateEdit() {
        //this._languageElem.querySelector('input').value = this.language;
        super._UpdateEdit();
    }
    SetLanguage(lang) {
        if (this._editor) {
            this._editor.SetLanguage(lang);
        }
    }
};

